<!--
 * @Author: your name
 * @Date: 2021-05-14 10:10:29
 * @LastEditTime: 2021-05-18 15:01:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \authorizationMobile\pages\hasAuthorization.html
-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<title>已经授权</title>
	<link rel="stylesheet" href="../css/amazeui.min.css">
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}

		#hasAuthorization {
			height: 100%;
			width: 100%;
			position: relative;
			padding: 3rem 1rem 1rem;
		}

		#hasAuthorization .body .item {
			overflow: hidden;
		}

		#hasAuthorization .body .item .title {
			float: left;
		}

		#hasAuthorization .body .item .detail {
			padding-left: 80px;
		}

		#hasAuthorization .mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: #ffffff;
			z-index: 99;
		}

		#hasAuthorization .mask .center_center {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 16px;
			color: #000000;
			z-index: 100;
		}

		#hasAuthorization .mask.show .center_center {
			display: none;
		}

		#hasAuthorization .mask.none {
			display: none;
		}

		.box p {
			float: left;
			/* font-size: 20px; */
			/* padding-right: 16px;*/
			animation-name: myani;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: ease;
			animation-direction: alternate;
			animation-fill-mode: both;
			margin: 0;
		}

		.s1 {
			animation-delay: 0.1s;
		}

		.s2 {
			animation-delay: 0.2s;
		}

		.s3 {
			animation-delay: 0.3s;
		}

		.s4 {
			animation-delay: 0.4s;
		}

		.s5 {
			animation-delay: 0.5s;
		}

		.s6 {
			animation-delay: 0.6s;
		}

		.s7 {
			animation-delay: 0.7s;
		}

		.s8 {
			animation-delay: 0.8s;
		}

		@keyframes myani {

			0% {
				padding-bottom: 0;
			}

			25% {
				transform: translateY(-10px);
			}

			50% {
				padding-bottom: 0;
			}

			75% {
				transform: translateY(-10px);
			}

			100% {
				padding-bottom: 0;
			}
		}

		#sendBtn {
			padding: 4px 10px;
			display: inline-block;
			background-color: #eeeeee;
			box-shadow: 0 7px 0 #bbbbbb, 0 8px 3px rgb(0 0 0 / 20%);
			color: #000000;
			border-radius: 5px;
			position: relative;
			top: 0;
		}

		#sendBtn:active {
			top: 5px;
			-webkit-transition-property: all;
			transition-property: all;
			-webkit-transition-duration: .15s;
			transition-duration: .15s;
			-webkit-box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgb(0 0 0 / 20%);
			box-shadow: 0 2px 0 #bbbbbb, 0 3px 3px rgb(0 0 0 / 20%);
		}
	</style>
</head>

<body>
	<div id="hasAuthorization">
		<div class="body">
			<div class="item am-margin-bottom-sm">
				<div class="title">客户名称：</div>
				<div class="detail name"></div>
			</div>
			<div class="item am-margin-bottom-sm">
				<div class="title">授权期限：</div>
				<div class="detail date"></div>
			</div>
			<div class="item am-margin-bottom-sm">
				<div class="title">设备类型：</div>
				<div class="detail type"></div>
			</div>
			<div class="item">
				<div class="title">授权码：</div>
			</div>
			<div class="code am-text-xl">
				50B0-UA2V-4DKF-4W1B
			</div>
			<div>
				<div class="btn" id="sendBtn">发送授权文件到钉钉</div>
			</div>
		</div>
		<div class="mask none" id="mask">
			<div class="center_center box">
				<p class="s1">正</p>
				<p class="s2">在</p>
				<p class="s3">加</p>
				<p class="s4">载</p>
				<p class="s5">中</p>
				<p class="s6">。</p>
				<p class="s7">。</p>
				<p class="s8">。</p>
			</div>
		</div>
	</div>
</body>

</html>
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/amazeui.min.js"></script>
<script>

	let key = '';
	function getStroage(name, callback) {
		let obj = localStorage.getItem(name);
		// alert(licenseKey)
		if (typeof (obj) != 'undefined' && obj != null) {
			// alert('back');
			callback(JSON.parse(obj))
		} else {
			alert('获取不到授权码，请重新获取');
			window.location.href = "../index.html";
		}
	}
	$(function () {
		getStroage('licenseKey',(data) => {
			key = data;
			let url = 'http://' + window.location.host + ':80/api/getLicense';
			// let url = 'http://192.168.2.192:7777/api/getLicense';
			$.ajax({
				type: "POST",
				url: url,
				data: {
					licenseKey: data,
				},
				contentType: "application/x-www-form-urlencoded",
				success: function (res) {
					// alert(JSON.stringify(res.data));
					if (res.status == 200) {
						$('#hasAuthorization .name').html(res.data.company);
						$('#hasAuthorization .date').html(res.data.date);
						$('#hasAuthorization .code').html(res.data.licenseKey);
						$('#hasAuthorization .type').html(res.data.device);
						$('#mask').addClass('none');
					} else {
						alert(res.data);
					}
				},
				error: function (err) {
					alert('数据获取失败：' + JSON.stringify(err))
				},
			});
		})

		$('#sendBtn').click(function () {
			
			getStroage('dingdingModel',(data) => {
				// alert(JSON.stringify(data))
				let formModel = {
					licenseKey: key,
					userId: data.userid,
				}
				// alert(JSON.stringify(formModel))
				let url = 'http://' + window.location.host + ':80/api/getLicense/notice';
				$.ajax({
					type: "POST",
					url: url,
					data: formModel,
					contentType: "application/x-www-form-urlencoded",
					success: function (res) {
						// alert(JSON.stringify(res.data));
						if (res.status == 200) {
							alert(res.data)
						} else {
							alert(res.data);
						}
					},
					error: function (err) {
						alert('数据发送失败：' + JSON.stringify(err))
					},
				});
			})
		})

	})
</script>